<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-02 17:04:52
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-01-05 10:12:29
 * @FilePath: \cxl-h5\src\components\banner\Index.vue
-->
<template>
    <section class="banner-c" ref="containerRef">
        <ul
            ref="ulRef"
            :style="{
                width: data.list.length * data.windowWidth + 'px',
                transform: `translate3d(${-data.index * data.windowWidth + data.moveX}px,0,0)`,
                transition: data.isMove ? 'none' : `transform ${data.duration}s`
            }"
        >
            <li :style="{ width: data.windowWidth + 'px' }" v-for="item in data.list" :key="item">
                <span><img :src="item.img" alt="" srcset="" /></span>
                <p>{{ item.text }}</p>
            </li>
        </ul>
        <section class="poinit-box">
            <span
                :class="[data.index - data.list.length / 3 == index ? 'active' : '']"
                v-for="(item, index) in data.list.length / 3"
                :key="item"
                @click="data.onClickPoint(index)"
            ></span>
        </section>
    </section>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import Banner from './index'

const ulRef = ref()
const containerRef = ref()
const data = reactive(new Banner())

onMounted(() => {
    console.log()
    data.windowWidth = containerRef.value.clientWidth
    data.addEvent(ulRef)
})

onBeforeUnmount(() => {
    data.removeEvent(ulRef)
})
</script>

<style lang="scss" scoped>
.banner-c {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: auto;
    padding-bottom: var(--cxl-size-30);
    ul {
        overflow: hidden;
        position: relative;

        li {
            float: left;
            height: 100%;
            span {
                display: block;
                width: 100%;
                img {
                    display: block;
                    width: 100%;
                }
            }
            p {
                margin-top: 0.5rem;
                text-align: center;
                font-size: var(--cxl-size-12);
            }
        }
    }

    .poinit-box {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-bottom: 0.5rem;

        span {
            display: block;
            border-radius: 0.25rem;
            height: 0.5rem;
            width: 0.5rem;
            margin: 0 0.4rem;
            background-color: rgba(87, 87, 87, 0.5);
            transition: all 0.35s;

            &.active {
                width: 2rem;
                background-color: var(--cxl-color-primary);
            }
        }
    }
}
</style>
